<!--
  ~ Copyright (c) 2014-2020 Bjoern Kimminich.
  ~ SPDX-License-Identifier: MIT
  -->

<mat-card class="mat-own-card mat-elevation-z6">
  <div>
    <app-payment-method (emitSelection)="getMessage($event)" [allowDelete]="false"></app-payment-method>
    <mat-divider></mat-divider>
    <div class="mat-elevation-z0" class="custom-card" *ngIf="mode !== 'wallet'">
      <div fxLayout="row">
        <div fxFlex="42%">
          <span translate class="card-title">LABEL_PAY_USING_WALLET</span>
        </div>
        <div fxFlex="38%">
          <b>
            <span class="card-title" translate>LABEL_WALLET_BALANCE</span>
            <span class="confirmation card-title"> {{ walletBalanceStr }}</span>
          </b>
        </div>
        <div fxFlex="20%">
          <button type="submit" color="primary" mat-raised-button class="btn" style="float: right;"
                  [disabled]="(walletBalance - totalPrice) < 0" (click)="useWallet()">
            <i class="fas fa-hand-holding-usd fa-lg"></i> {{'LABEL_PAY' | translate}} {{ totalPrice?.toFixed(2) }}¤
          </button>
        </div>
      </div>
    </div>
    <mat-divider></mat-divider>
    <mat-expansion-panel class="mat-elevation-z0" [expanded]="couponPanelExpanded" id="collapseCouponElement"
                         *ngIf="mode !== 'wallet'">
      <mat-expansion-panel-header class="detail-divider">
        <mat-panel-title>
          {{"ADD_A_COUPON" | translate}}
        </mat-panel-title>
        <mat-panel-description>
          {{"VOUCHERS_AND_PROMOTIONAL_CODE" | translate}}
        </mat-panel-description>
      </mat-expansion-panel-header>
      <div *ngIf="couponConfirmation && !couponControl.dirty" style="margin-top:5px;" class="confirmation">{{
        couponConfirmation }}
      </div>
      <div *ngIf="couponError && !couponControl.dirty" style="margin-top:5px;" class="error">{{couponError?.error}}
      </div>
      <mat-form-field appearance="outline" color="accent">
        <mat-label translate>LABEL_COUPON</mat-label>
        <mat-hint
            [innerHtml]="'FOLLOW_FOR_MONTHLY_COUPONS' | translate:{twitter: twitterUrl, facebook: facebookUrl}">
        </mat-hint>
        <input #coupon id="coupon" [formControl]="couponControl" matInput type="text" placeholder="{{ 'ENTER_COUPON_CODE' | translate}}">
        <mat-hint align="end">{{coupon .value?.length || 0}}/10</mat-hint>
        <mat-error *ngIf="couponControl.invalid && (couponControl.errors.minlength || couponControl.errors.maxlength)">
          {{'COUPON_CODE_HINT' | translate}}
        </mat-error>
      </mat-form-field>
      <button type="submit" id="applyCouponButton" color="accent" style="margin-top:5px; float: right;" (click)="applyCoupon()"
              [disabled]="couponControl.invalid" mat-raised-button>
        <mat-icon>
          redeem
        </mat-icon>
        {{'BTN_REDEEM' | translate}}
      </button>
    </mat-expansion-panel>
    <mat-divider></mat-divider>
    <mat-expansion-panel class="mat-elevation-z0" [expanded]="paymentPanelExpanded" *ngIf="mode !== 'wallet'">
      <mat-expansion-panel-header class="detail-divider">
        <mat-panel-title>
          {{"OTHER_PAYMENT_OPTIONS" | translate}}
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div fxLayout="row" fxLayout.lt-lg="column">
        <div fxFlex="34%" fxFlex.lt-lg="100%" class="mat-elevation-z0">
          <div class="payment-label">
            <label translate>LABEL_DONATIONS</label>
          </div>
          <small>
            (<span *ngIf="applicationName === 'OWASP Juice Shop'" translate
                   [translateParams]="{juiceshop: 'OWASP Juice Shop'}">THANKS_FOR_SUPPORT</span>
            <span *ngIf="applicationName !== 'OWASP Juice Shop'" translate
                  [translateParams]="{appname: applicationName}">THANKS_FOR_SUPPORT_CUSTOMIZED</span>
            <i style="margin-left: 3px;" class="fas fa-heart error"></i>)
          </small>
          <div class="button-container" style="margin-top: 6px;">
            <a href="https://pwning.owasp-juice.shop/part3/donations.html">
              <button mat-stroked-button><i class="fab fa-stripe fa-lg"></i> {{'BTN_CREDIT_CARD' | translate}}</button>
            </a>
            <button mat-stroked-button (click)="showBitcoinQrCode()" *ngIf="false"><i class="fab fa-btc fa-lg"></i>
              Bitcoin
            </button>
            <button mat-stroked-button (click)="showDashQrCode()" *ngIf="false"><i class="fa-lg">Ð</i> Dash</button>
            <button mat-stroked-button (click)="showEtherQrCode()" *ngIf="false"><i class="fab fa-ethereum fa-lg"></i>
              Ether
            </button>
          </div>
        </div>
        <span class="fill-remaining-space"></span>
        <div fxFlex="65%" fxFlex.lt-lg="100%" class="mat-elevation-z0">
          <div class="payment-label">
            <label translate>LABEL_MERCHANDISE</label>
          </div>
          <small>
            (<span *ngIf="applicationName === 'OWASP Juice Shop'" translate
                   [translateParams]="{juiceshop: 'OWASP Juice Shop'}">OFFICIAL_MERCHANDISE_STORES</span>
            <span *ngIf="applicationName !== 'OWASP Juice Shop'" translate
                  [translateParams]="{appname: applicationName}">OFFICIAL_MERCHANDISE_STORES_CUSTOMIZED</span>
            <i style="margin-left: 3px;" class="fas fa-thumbs-up confirmation"></i>)
          </small>
          <div class="button-container" style="margin-top: 6px;">
            <a href="./redirect?to=http://shop.spreadshirt.com/juiceshop">
              <button mat-stroked-button><i class="fas fa-tshirt fa-lg"></i> Spreadshirt (US)</button>
            </a>
            <a href="./redirect?to=http://shop.spreadshirt.de/juiceshop">
              <button mat-stroked-button><i class="fas fa-tshirt fa-lg"></i> Spreadshirt (DE)</button>
            </a>
            <a href="./redirect?to=https://www.stickeryou.com/products/owasp-juice-shop/794">
              <button mat-stroked-button><i class="fas fa-sticky-note fa-lg"></i> StickerYou</button>
            </a>
            <a href="./redirect?to=http://leanpub.com/juice-shop">
              <button mat-stroked-button><i class="fab fa-leanpub fa-lg"></i> Leanpub</button>
            </a>
          </div>
        </div>
      </div>
    </mat-expansion-panel>
    <mat-divider></mat-divider>
    <div style="margin-top: 20px;">
      <button mat-stroked-button class="btn btn-return" (click)="routeToPreviousUrl()">
        <mat-icon>
          navigate_before
        </mat-icon>
        {{'LABEL_BACK' | translate}}
      </button>
      <button mat-raised-button mat-button class="btn nextButton" color="primary" aria-label="Proceed to review"
              [disabled]="paymentId === undefined && paymentMode !== 'wallet'" (click)="choosePayment()">
        <mat-icon>
          navigate_next
        </mat-icon>
        <span translate>LABEL_CONTINUE</span>
      </button>
      <p style="text-align: center;margin-top: -27px;">
        <span translate *ngIf="mode !== 'deluxe' && mode !== 'wallet'">REVIEW_ALERT</span>
        <span translate *ngIf="mode === 'wallet'">REVIEW_WALLET</span>
      </p>
    </div>
  </div>

</mat-card>
